import React, { memo } from 'react';
import { CheckCircleTwoTone } from '@ant-design/icons';
import { Handle, Position } from '@xyflow/react';
import { Collapse, Form, Input, Button, Select } from 'antd';
import type { SelectProps } from 'antd';
import styles from './index.module.less';
/**
 * 开始事件节点
 * @param {*} param0
 * @returns
 */
function DubboInvokeNode({ id, type, data }) {
  
  const [form] = Form.useForm();


  const options: SelectProps['options'] = [];

  for (let i = 10; i < 36; i++) {
    options.push({
      label: "应用ID" + i,
      value: i.toString(36) + i,
    });
  }

  const handleChange = (value: string[]) => {
    console.log(`selected ${value}`);
  };

  // 内容定义
  const items = [
    {
      key: 'node-start',
      label: (
        <>
          <div>
            <CheckCircleTwoTone twoToneColor="#52c41a" /> dubbo请求
          </div>
          <div style={{ color: '#1c1d2399', transform: 'translateX(-23px)' }}>
            允许通过 dubbo 协议发送服务器请求
          </div>
        </>
      ),
      children: (
        <>
          <Form form={form} layout="horizontal" size="small">
            <Form.Item
              label="选择知识库"
              required
              tooltip="每次对话前，给用户发送的信息"
            >
              <Button type="primary" size={"small"}>Primary Button</Button>
            </Form.Item>
          </Form>
          <Form form={form} layout="vertical" size="small">
            <Form.Item
              label="查询变量"
              required
              tooltip="每次对话前，给用户发送的信息"
            >
              <Select
                // mode="multiple"
                allowClear
                style={{ width: '100%' }}
                placeholder="Please select"
                defaultValue={['应用ID']}
                onChange={handleChange}
                options={options}
              />
            </Form.Item>
          </Form>
        </>
      ),
      style: {
        background: '#fff',
      },
    },
  ];

  return (
    <>
      <Handle type="source" position={Position.Right} />
      <Collapse
        bordered={false}
        defaultActiveKey={['1']}
        className={styles.dubboInvokeNode}
        items={items}
      />
      {/* 定义连接点：终点 */}
      <Handle type="target" position={Position.Left} />
    </>
  );
}

export default memo(DubboInvokeNode);
